<template>
  <div class="box">
    <div class="tabsContainer">
      <el-tabs style="padding: 0rem 0rem 0rem">
        <el-tab-pane label="语音转文字">
          <div style="margin-top: 2rem">
            <span class="mylabel">麦克风选择:</span>
            <el-select
              style="width: 15rem; height: 80px"
              v-model="audioSelected"
              filterable
              placeholder="选择麦克风"
              @change="changeAudio"
            >
              <el-option
                style="width: 21rem; height: 2.2rem"
                v-for="(item, index) in audioList"
                :key="index"
                :label="item.devideLable"
                :value="item.deviceId"
              >
              </el-option> </el-select
            ><br />
            <span class="mylabel">等待时长:</span>
            <el-select
              style="width: 15rem; height: 80px"
              v-model="durationSelected"
              filterable
              placeholder="选择时长"
            >
              <el-option
                style="width: 21rem; height: 2.2rem"
                v-for="(item, index) in durationList"
                :key="index"
                :label="item.durationLable"
                :value="item.durationId"
              >
              </el-option> </el-select
            ><br />
            <span class="mylabel">开发模式:</span>
            <el-select
              style="width: 15rem; height: 80px"
              v-model="modeSelected"
              filterable
              placeholder="选择开发模式"
            >
              <el-option
                style="width: 21rem; height: 2.2rem"
                v-for="(item, index) in modeList"
                :key="index"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <el-button
            style="margin-right: 1rem"
            type=""
            round
            @click="resetAudioList"
            >重置</el-button
          >
          <el-button
            style="margin-left: 1rem"
            type="success"
            round
            @click="changeAudioList"
            >确认</el-button
          >
        </el-tab-pane>
        <el-tab-pane label="文字转语音">
          <div style="margin-top: 2rem">
            <span class="mylabel">tts选择:</span>
            <el-select
              style="width: 15rem; height: 80px"
              v-model="ttsSelectedValue"
              filterable
              placeholder="tts选择"
              @change="changeTTS"
            >
              <el-option
                style="width: 21rem; height: 2.2rem"
                v-for="(item, index) in ttsList"
                :key="index"
                :label="item.ttsName"
                :value="item.ttsValue"
              >
              </el-option>
            </el-select><br />
          </div>
          <el-button
            style="margin-right: 1rem"
            type=""
            round
            @click="resetTTSList"
            >重置</el-button
          >
          <el-button
            style="margin-left: 1rem"
            type="success"
            round
            @click="changeTTSList"
            >确认</el-button
          >
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
  
<script>
import Cookies from 'js-cookie'

export default {
  name: "RealtimeVoice",
  data() {
    return {
      resID: this.$store.state.currentUserId,
      audioSelected: "",
      audioSelectedValue: "",
      
      audioList: [],
      modeList: [
        { id: "0", value: "运行模式" },
        { id: "1", value: "调试模式" },
      ],
      durationSelected: 15,
      isEnable: 1,
      durationList: [
        { durationId: 10, durationLable: "10s" },
        { durationId: 15, durationLable: "15s" },
        { durationId: 20, durationLable: "20s" },
      ],
      modeSelected: "0",
      ttsList:[
      { ttsName: '百度语音合成', ttsValue: "baidutts" },
      { ttsName: 'JS语音合成', ttsValue: "jstts" },
      ],
      ttsSelectedValue:"baidutts",
    };
  },
  created() {
    // this.getChatParams();
  },
  mounted() {
    // 默认
    this.initAudio();
    this.initMode();
    this.initDuration();
    this.initTTS();
    
    console.log('Cookies.get("audioSelected")',Cookies.get("audioSelected"));
    console.log('Cookies.get("audioSelectedValue")',Cookies.get("audioSelectedValue"));
    console.log('Cookies.get("modeSelected")',Cookies.get("modeSelected"));
    console.log('Cookies.get("durationSelected")',Cookies.get("durationSelected"));
  },
  computed: {},
  methods: {
    // async getChatParams() {
    //   try {
    //     const {  data } = await getChatParams({ resID: this.resID });
    //     if (data) {
    //       this.durationSelected = data.waitInterval;
    //       this.isEnable = data.isEnable;
    //     }
    //   } catch (err) {
    //     console.log(err);
    //   }
    // },

    getAudioListData(callback) {
      if (!navigator.mediaDevices?.enumerateDevices) {
        console.log("enumerateDevices() not supported.");
      } else {
        navigator.mediaDevices
          .enumerateDevices()
          .then((devices) => {
            devices.forEach((device) => {
              // console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
              if (device.kind == "audioinput")
                this.audioList.push({
                  deviceId: device.deviceId,
                  devideLable: device.label,
                });
            });
            callback(this.audioList);
          })
          .catch((err) => {
            console.error(`${err.name}: ${err.message}`);
          });
      }
    },
    initAudio() {
      this.getAudioListData((data) => {
        // 之前未存数据或者 此设备现在已经不存在
        if (
          // !localStorage.getItem("audioSelected") ||
          // !this.contains(data, localStorage.getItem("audioSelected"))
          !Cookies.get("audioSelected") ||
          !this.contains(data, Cookies.get("audioSelected"))
        ) {
          // 之前未存数据
          this.audioSelected = data[0].deviceId;
          this.audioSelectedValue = data[0].devideLable;
          localStorage.setItem("audioSelected", this.audioSelected);
          localStorage.setItem("audioSelectedValue", this.audioSelectedValue);
          Cookies.set('audioSelected', this.audioSelected,{ expires: 365});
          Cookies.set('audioSelectedValue', this.audioSelectedValue,{ expires: 365});
        } else {
          // 之前有存数据
          // this.audioSelected = localStorage.getItem("audioSelected");
          // this.audioSelectedValue = localStorage.getItem("audioSelectedValue");
          this.audioSelected = Cookies.get("audioSelected");
          this.audioSelectedValue = Cookies.get("audioSelectedValue");
        }
      });
    },
    initMode() {
      // if (!localStorage.getItem("modeSelected")) {
      if (!Cookies.get("modeSelected")) {
        // 之前未存数据
        this.modeSelected = "0";
        localStorage.setItem("modeSelected", this.modeSelected);
          Cookies.set('modeSelected', this.modeSelected,{ expires: 365});

      } else {
        // 之前有存数据
        // this.modeSelected = localStorage.getItem("modeSelected");
        this.modeSelected = Cookies.get("modeSelected");
      }
    },
    initDuration() {
      // if (!localStorage.getItem("durationSelected")) {
      if (!Cookies.get("durationSelected")) {
        // 之前未存数据
        this.durationSelected = 10;
        localStorage.setItem("durationSelected", this.durationSelected);
          Cookies.set('durationSelected', this.durationSelected,{ expires: 365});
      } else {
        // 之前有存数据
        this.durationSelected = parseInt(
          // localStorage.getItem("durationSelected")
          Cookies.get("durationSelected")
        );
      }
    },
    initTTS() {
      // if (!localStorage.getItem("durationSelected")) {
      if (!Cookies.get("ttsSelectedValue")) {
        // 之前未存数据
        this.ttsSelectedValue = 'baidutts';
        localStorage.setItem("ttsSelectedValue", this.ttsSelectedValue);
          Cookies.set('ttsSelectedValue', this.ttsSelectedValue,{ expires: 365});
      } else {
        // 之前有存数据
        this.ttsSelectedValue = Cookies.get("ttsSelectedValue")
      }
    },
    contains(arr, val) {
      return (
        arr.filter((item) => {
          return item.deviceId == val;
        }).length > 0
      );
    },
    logout() {
      this.$router.push("/");
    },
    changeAudio(e) {
      let resultArr = this.audioList.filter((item) => {
        return item.deviceId === e;
      });
      this.audioSelectedValue = resultArr[0].devideLable;
    },
    changeTTS(e) {
      this.ttsSelectedValue = e;
    },
    // 重置
    resetAudioList() {
      this.audioSelected = this.audioList[0].deviceId;
      this.audioSelectedValue = this.audioList[0].devideLable;
      this.modeSelected = "0";
      this.durationSelected = 10;
    },
    // 确认
    async changeAudioList() {
      localStorage.setItem("audioSelected", this.audioSelected);
      localStorage.setItem("audioSelectedValue", this.audioSelectedValue);
      localStorage.setItem("durationSelected", this.durationSelected);
      localStorage.setItem("modeSelected", this.modeSelected);
      Cookies.set("audioSelected", this.audioSelected,{ expires: 365});
      Cookies.set("audioSelectedValue", this.audioSelectedValue,{ expires: 365 });
      Cookies.set("durationSelected", this.durationSelected,{ expires: 365 });
      Cookies.set("modeSelected", this.modeSelected,{ expires: 365 });
      this.$message({
        message: "语音转文字配置成功",
        type: "success",
      });
    },
    // 重置
    resetTTSList() {
      this.ttsSelectedValue = "baidutts";
    },
    // 确认
    async changeTTSList() {
      localStorage.setItem("ttsSelectedValue", this.ttsSelectedValue);
      Cookies.set("ttsSelectedValue", this.ttsSelectedValue,{ expires: 365});
      this.$message({
        message: "tts配置成功",
        type: "success",
      });
    },
  },
};
</script>

<style scoped>
.mylabel {
  width: 120px;
  margin-right: 10px;
  text-align: right;
  display: inline-block;
  font-size:18px;
}
</style>
  